<script>
import practiceByYear from "./components/practiceByYear.vue"
import practiceByQuestionType from "./components/practiceByQuestionType.vue"
import websocket from "@/utils/websocket"
import shareInfo from "@/utils/shareInfo"
import { handleUrlParams } from "@/utils"
import urlUtils from "@/utils/urlUtils"
import request from "@/utils/request"
import studyRoomFloat from "@/components/studyRoomFloat/index.vue"

export default {
  name: "chooseStructure",
  components: {
    practiceByYear,
    practiceByQuestionType,
		studyRoomFloat,
  },
  data() {
    return {
      tabList: [
        {
          value: "practiceByYear",
          label: "按年份刷题",
        },
        {
          value: "practiceByQuestionType",
          label: "按题型刷题",
        },
      ],
      currentTab: "practiceByYear",
      queryParams: {
        classId: "", //题目分类 id
      },
      query: null, //用于传递给子组件
      className: "", //题目分类名称
      goToCourseStudyInfo: null, //跳转到课程学习配置信息
    }
  },
  onLoad(query = {}) {
    //获取跳转到课程学习配置信息
    request({
      url: "courseRegisteredUser/getZLXCXAppConfig",
      data: {
        classId: query.classId,
      },
      showLoading: true,
    })
      .then((data) => {
        //获取到了数据则显示课程学习tab
        if (data) {
          this.tabList.push({
            value: "courseStudy",
            label: "课程学习",
            onClick: () => {
              uni.navigateToMiniProgram({
                appId: data.appId,
                path: handleUrlParams("pages/tabbar/course/index", data.urlParam),
              })
            },
          })
        }
        this.goToCourseStudyInfo = data
      })
      .catch((err) => {
        console.log(err, "err")
      })
    this.query = query
    this.queryParams.classId = query.classId
    if (query.currentTab) {
      this.tabChange(query.currentTab)
    }
    if (query.className) {
      this.className = decodeURIComponent(query.className)
      uni.setNavigationBarTitle({
        title: this.className,
      })
    }
  },
  onShow() {
    websocket.trackCurrentPage("题型选择").catch(() => {})
    this.tabChange()
  },
  methods: {
    tabChange(value = this.currentTab, onClick) {
      if (onClick) {
        onClick()
      } else {
        this.currentTab = value
        this.$nextTick(() => {
          this.$refs[value].init(this.queryParams)
        })
      }
    },
  },
  provide() {
    return {
      parent: this,
    }
  },
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: urlUtils.getCurrentPageUrl(),
      title: this.className + " - 题库大全",
      imageUrl: "",
    })
  },
}
</script>

<template>
  <view class="page">
    <view class="tab-list">
      <view
        v-for="item in tabList"
        :key="item.value"
        :class="[item.value === currentTab ? 'active' : '', 'tab-item']"
        @click="tabChange(item.value, item.onClick)"
        >{{ item.label }}
      </view>
    </view>
    <!--		按年份刷题-->
    <practice-by-year ref="practiceByYear" height="calc(100vh - 108rpx)" v-if="currentTab === 'practiceByYear'"></practice-by-year>
    <!--		按题型刷题-->
    <practice-by-question-type ref="practiceByQuestionType" v-else-if="currentTab === 'practiceByQuestionType'"></practice-by-question-type>
		
		<studyRoomFloat></studyRoomFloat>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding-top: 108rpx;
  .tab-list {
    position: fixed;
    background: white;
    top: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    display: flex;
    justify-content: space-around;
    .tab-item {
      color: var(--text-color-light);
      font-size: 33rpx;
      &.active {
        font-size: 36rpx;
        color: var(--text-color);
        font-weight: bold;
      }
    }
  }
}
</style>
